<template>
  <Card style="height:800px">
    <header>
      <span>描述:</span>
      <Input v-model="desc" style="width:200px" placeholder="请输入" />
      <Button type="primary" @click="queryPage" style="margin-left: 10px;">查询</Button>
      <Button type="primary" @click="addItem();" style="margin-left: 10px;">新建</Button>
    </header>
    <Content style="margin-top:20px;">
      <Table border :columns="columns1" :data="data1"></Table>
    </Content>
    <Modal v-model="turnOut" title="新增" @on-ok="hold" @on-cancel="cancel" :mask-closable="mask" :footer-hide="true" width="800" ok-text="保存">
      <div>
        <div style="width:500px;margin:0px auto">
          <Row type="flex" align="middle">
            <Col span="8">机构:</Col>
            <Col span="14">
            <Select v-model="formDatas.organization" style="width: 300px;">
              <Option v-for="item in orgList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            </Col>
          </Row>
          </br>
          <Row type="flex" align="middle">
            <Col span="8">描述:</Col>
            <Col span="14">
            <Input v-model="formDatas.description" style="width: 300px;" placeholder="请输入"></Input>
            </Col>
          </Row>
          </br>
          <Row type="flex" align="middle">
            <Col span="8">固定利率:</Col>
            <Col span="14">
            <Input v-model="formDatas.rate" style="width: 300px;" placeholder="请输入"></Input>
            </Col>
          </Row>
          </br>
          <Row type="flex" align="middle">
            <Col span="8">基本费用:</Col>
            <Col span="14">
            <Input v-model="formDatas.baseFee" style="width: 300px;" placeholder="请输入"></Input>
            </Col>
          </Row>
          </br>
          <Row type="flex" align="middle">
            <Col span="8">利率计算基准:</Col>
            <Col span="14">
            <Select v-model="formDatas.yearBase" style="width: 300px;">
              <Option v-for="item in yearBaseData" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            </Col>
          </Row>
          </br>
          <Row type="flex" align="middle">
            <Col span="12" style="text-align:center"><Button type="primary" @click="cancel()">取消</Button></Col>
            <Col span="12" style="text-align:center">
            <Button type="primary"  @click="hold()">保存</Button>
            </Col>
          </Row>
        </div>
      </div>
    </Modal>
    <div class="page-box">
      <Page :total="totalNumber" size="small" :current="currentPage" :page-size="pageSize" show-total @on-change="pageIndexChange"></Page>
    </div>
  </Card>
</template>

<script>
export default {
  data () {
    return {
      turnOut: false,
      mask: false,
      submit: '',
      $ajax: null,
      formDatas: {
        rateId: null,
        organization: '100',
        description: null,
        rate: null,
        baseFee: null,
        yearBase: 360,
        status: null
      },
      tmpFormDatas: {
        rateId: null,
        organization: '100',
        description: null,
        rate: null,
        baseFee: null,
        yearBase: 360,
        status: null
      },
      yearBaseData: [
        {
          value: 360,
          label: '360'
        },
        {
          value: 365,
          label: '365'
        },
        {
          value: 366,
          label: '366(365)'
        }
      ],
      orgList: [
        {
          value: '100',
          label: '消费金融'
        }
      ],
      path: this.$route.path,

      desc: '',

      totalNumber: 0, // 总记录数

      currentPage: 1, // 当前页码

      pageSize: 10, // 页大小

      columns1: [
        {
          title: '利率ID',
          key: 'rateId',
          type: 'index',
          width: 100,
          align: 'center'
          // render: (h, params) => {
          //   var vm = this
          //   return h('div', [
          //     h('a', {
          //       style: {
          //         textDecoration: 'underline'
          //       },
          //       on: {
          //         click: function () {
          //           vm.$router.push({
          //             path: vm.path + '/editor',
          //             query: {
          //               index: params.row.rateId,
          //               type: 2
          //             }
          //           })
          //         }
          //       }
          //     }, params.row.rateId)
          //   ])
          // }
        },
        {
          title: '机构',
          key: 'organization',
          align: 'center',
          render: (h, params) => {
            var vm = this
            var id = params.row.rateId + ''
            const organization = params.row.organization
            var organizationName = ''
            for (var i = 0; i < vm.orgList.length; i++) {
              if (vm.orgList[i].value === organization) {
                organizationName = vm.orgList[i].label
                break
              }
            }
            return h('div', [
              vm.submit !== id &&
              h(
                'div',
                {
                  props: {
                    value: vm.data1[params.index].organization
                  }
                },
                organizationName
              ),
              vm.submit === id &&
              h(
                'Select',
                {
                  props: {
                    value: vm.data1[params.index].organization
                  },
                  on: {
                    'on-change': value => {
                      vm.templateData1[params.index].organization =
                        value
                    }
                  }
                },
                this.orgList.map(function (type) {
                  return h(
                    'Option',
                    {
                      props: { value: type.value + '' }
                    },
                    type.label
                  )
                })
              )
            ])
          }
        },
        {
          title: '利率计算基准',
          align: 'center',
          key: 'yearBase',
          render: (h, params) => {
            var vm = this
            var id = params.row.rateId + ''
            const yearBase = params.row.yearBase
            var oyearBaseName = ''
            for (var i = 0; i < vm.yearBaseData.length; i++) {
              if (vm.yearBaseData[i].value + '' === yearBase + '') {
                oyearBaseName = vm.yearBaseData[i].label
                break
              }
            }
            return h('div', [
              vm.submit !== id &&
              h(
                'div',
                {
                  props: {
                    value: vm.data1[params.index].yearBase
                  }
                },
                oyearBaseName
              ),
              vm.submit === id &&
              h(
                'Select',
                {
                  props: {
                    value: vm.data1[params.index].yearBase
                  },
                  on: {
                    'on-change': value => {
                      vm.templateData1[params.index].yearBase =
                        value
                    }
                  }
                },
                this.yearBaseData.map(function (type) {
                  return h(
                    'Option',
                    {
                      props: { value: type.value }
                    },
                    type.label
                  )
                })
              )
            ])
          }
        },
        {
          title: '描述',
          align: 'center',
          key: 'description',
          render: (h, params) => {
            var vm = this
            var id = params.row.rateId + ''
            return h('div', [
              vm.submit !== id &&
              h(
                'div',
                {
                  props: {
                    value: vm.data1[params.index].description
                  }
                },
                vm.data1[params.index].description
              ),
              vm.submit === id &&
              h('Input', {
                props: {
                  value: vm.data1[params.index].description
                },
                on: {
                  'on-change': e => {
                    vm.templateData1[params.index].description =
                      (e.target.value + '').trim()
                  }
                }
              })
            ])
          }
        },
        {
          title: '固定利率',
          align: 'center',
          key: 'rate',
          render: (h, params) => {
            var vm = this
            var id = params.row.rateId + ''
            return h('div', [
              vm.submit !== id &&
              h(
                'div',
                {
                  props: {
                    value: vm.data1[params.index].rate
                  }
                },
                vm.data1[params.index].rate
              ),
              vm.submit === id &&
              h('Input', {
                props: {
                  value: vm.data1[params.index].rate
                },
                on: {
                  'on-change': e => {
                    vm.templateData1[params.index].rate =
                      (e.target.value + '').trim()
                  }
                }
              })
            ])
          }
        },
        {
          title: '基本费用',
          align: 'center',
          key: 'baseFee',
          render: (h, params) => {
            var vm = this
            var id = params.row.rateId + ''
            return h('div', [
              vm.submit !== id &&
              h(
                'div',
                {
                  props: {
                    value: vm.data1[params.index].baseFee
                  }
                },
                vm.data1[params.index].baseFee
              ),
              vm.submit === id &&
              h('Input', {
                props: {
                  value: vm.data1[params.index].baseFee
                },
                on: {
                  'on-change': e => {
                    vm.templateData1[params.index].baseFee =
                      (e.target.value + '').trim()
                  }
                }
              })
            ])
          }
        },

        {
          title: '状态',
          align: 'center',
          key: 'status',
          render: function (h, param) {
            const status = param.row.status
            switch (status) {
              case 0:
                return h('div', '使用中')
              case 1:
                return h('div', '拒绝')
              case 9:
                return h('div', '待审核')
              case 10:
                return h('div', '停用')
              default:
                return h('div', '')
            }
          }
        },
        {
          title: '操作',
          align: 'center',
          width: 300,
          render: function (h, param) {
            const vm = this
            var id = param.row.rateId + ''
            return h('div', {}, [
              (param.row.status === 9 || param.row.status === 1) &&
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    fontSize: '12px'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '利率审核',

                        content: '通过?',

                        okText: '确定',

                        cancelText: '取消',
                        onOk: () => {
                          var params = {
                            rateId: param.row.rateId,
                            status: 0,
                            checkDesc: true
                          }
                          vm.$ajax
                            .post(
                              vm.$appContext.marvels_core_product +
                              '/product/param/rate/service/updateStatus',
                              params
                            )
                            .then(re => {
                              var data = re.data
                              var code = data.code
                              if (code === 'success') {
                                param.row.status = 0
                                vm.templateData1[param.index].status = 0
                              }
                            })
                            .catch(er => { })
                        }
                      })
                    }
                  }
                },
                '通过'
              ),
              param.row.status === 9 &&
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    fontSize: '12px',
                    marginLeft: '5px'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '利率审核',

                        content: '拒绝?',

                        okText: '确定',

                        cancelText: '取消',
                        onOk: () => {
                          var params = {
                            rateId: param.row.rateId,
                            status: 1,
                            checkDesc: true
                          }
                          vm.$ajax
                            .post(
                              vm.$appContext.marvels_core_product +
                              '/product/param/rate/service/updateStatus',
                              params
                            )
                            .then(re => {
                              var data = re.data
                              var code = data.code
                              if (code === 'success') {
                                param.row.status = 1
                                vm.templateData1[param.index].status = 1
                              }
                            })
                            .catch(er => { })
                        }
                      })
                    }
                  }
                },
                '拒绝'
              ),
              param.row.status === 10 &&
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    fontSize: '12px',
                    marginLeft: '5px'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '利率审核',

                        content: '使用?',

                        okText: '确定',

                        cancelText: '取消',
                        onOk: () => {
                          var params = {
                            rateId: param.row.rateId,
                            status: 0,
                            checkDesc: true
                          }
                          vm.$ajax
                            .post(
                              vm.$appContext.marvels_core_product +
                              '/product/param/rate/service/updateStatus',
                              params
                            )
                            .then(re => {
                              var data = re.data
                              var code = data.code
                              if (code === 'success') {
                                param.row.status = 0
                                vm.templateData1[param.index].status = 0
                              }
                            })
                            .catch(er => { })
                        }
                      })
                    }
                  }
                },
                '使用'
              ),
              param.row.status === 0 &&
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    fontSize: '12px',
                    marginLeft: '5px'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '利率审核',

                        content: '停用?',

                        okText: '确定',

                        cancelText: '取消',
                        onOk: () => {
                          var params = {
                            rateId: param.row.rateId,
                            status: 10,
                            checkDesc: true
                          }
                          vm.$ajax
                            .post(
                              vm.$appContext.marvels_core_product +
                              '/product/param/rate/service/updateStatus',
                              params
                            )
                            .then(re => {
                              var data = re.data
                              var code = data.code
                              if (code === 'success') {
                                param.row.status = 10
                                vm.templateData1[param.index].status = 10
                              }
                            })
                            .catch(er => { })
                        }
                      })
                    }
                  }
                },
                '停用'
              ),
              // param.row.status === 9 &&
              //   !vm.$route.meta.isFromCheck
              (vm.submit !== id || vm.submit === '') &&
              h(
                'Button',
                {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    fontSize: '12px',
                    marginLeft: '5px'
                  },
                  on: {
                    click () {
                      // vm.$router.push({
                      //   path: vm.path + "/editor",
                      //   query: {
                      //     index: param.row.rateId,
                      //     type: 1
                      //   }
                      // });
                      sessionStorage.setItem('lv', '' + param.row.rateId)
                      vm.submit = param.row.rateId + ''
                      vm.templateData1 = JSON.parse(JSON.stringify(vm.data1))
                    }
                  }
                },
                ' 编辑'
              ),
              vm.submit === id &&
              h(
                'Button',
                {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    fontSize: '12px',
                    marginLeft: '5px'
                  },
                  on: {
                    click () {
                      var params = vm.templateData1[param.index]
                      var judge = vm.identity(params)
                      if (judge) {
                        return
                      }
                      sessionStorage.setItem('lv', '')
                      vm.submit = ''
                      vm.$ajax
                        .post(
                          vm.$appContext.marvels_core_product +
                          '/product/param/rate/service/update',
                          params
                        )
                        .then(re => {
                          var tmp = JSON.parse(
                            JSON.stringify(vm.templateData1)
                          )
                          vm.data1 = tmp
                        })
                        .catch(er => { })
                      // vm.$router.push({
                      //   path: vm.path + "/editor",
                      //   query: {
                      //     index: param.row.amortId,
                      //     type: 1
                      //   }
                      // });
                    }
                  }
                },
                '保存'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    fontSize: '12px',
                    marginLeft: '5px'
                  },
                  on: {
                    click () {
                      vm.$Modal.confirm({
                        title: '利率',

                        content: '确定删除?',

                        okText: '确定',

                        cancelText: '取消',
                        onOk: () => {
                          var params = {
                            rateId: param.row.rateId
                          }
                          vm.$ajax
                            .post(
                              vm.$appContext.marvels_core_product +
                          '/product/param/rate/service/delete',
                              params
                            )
                            .then(re => {
                              var data = re.data
                              var code = data.code
                              var message = data.message
                              if (code === 'success') {
                                vm.$Message.success(message)
                              } else {
                                vm.$Message.warn(data.data)
                              }
                              vm.queryPage()
                            })
                        }
                      })
                    }
                  }
                },
                '删除'
              )
            ])
          }.bind(this)
        }
      ],

      data1: [],
      templateData1: []
    }
  },

  methods: {
    pageIndexChange (pageIndex) {
      this.currentPage = pageIndex
      this.queryPage()
    },
    identity (params) {
      var reg = /^[-+]?\d\.\d+$/
      if (params.rate === null || params.baseFee === null || params.rate === '' || params.baseFee === '') {
        this.$Message.warning('利率和费用不能为空')
        return true
      }
      if (!reg.test((params.rate + '').trim()) || !reg.test((params.baseFee + '').trim())) {
        this.$Message.warning('请输入数字')
        return true
      }
      if (params.description !== null && params.description.length > 15) {
        this.$Message.warning('描述输入过长')
        return true
      }
      if (params.rate.length > 15) {
        this.$Message.warning('固定利率输入过长')
        return true
      }
      if (params.baseFee.length > 15) {
        this.$Message.warning('基本费用输入过长')
        return true
      }

      return false
    },
    initPage () {
      this.queryPage()
    },

    queryPage () {
      const vm = this
      if (vm.desc.length > 30) {
        this.$Message.warning('查询参数输入过长')
        return
      }
      var params = {
        currentPage: vm.currentPage,
        pageSize: vm.pageSize,
        desc: vm.desc
      }
      vm.$ajax
        .post(
          vm.$appContext.marvels_core_product +
          '/product/param/rate/service/list',
          params
        )
        .then(re => {
          var data = re.data
          var code = data.code
          var message = data.message
          if (code !== 'success') {
            this.$Message.warning(message)
            return
          }
          vm.data1 = re.data.data.list
          vm.templateData1 = JSON.parse(JSON.stringify(vm.data1))
          vm.totalNumber = re.data.data.total
        })
        .catch(er => { })
    },
    hold () {
      var vm = this
      var params = vm.formDatas
      var judge = vm.identity(params)
      if (judge) {
        return
      }
      this.$ajax
        .post(
          vm.$appContext.marvels_core_product +
          '/product/param/rate/service/save',
          params
        )
        .then(re => {
          var data = re.data
          var code = data.code
          var message = data.message
          if (code !== 'success') {
            this.$Message.error(message)
            return
          }
          vm.formDatas = JSON.parse(JSON.stringify(vm.tmpFormDatas))
          vm.turnOut = false
          this.queryPage()
        })
        .catch(er => { })
    },
    cancel () {
      var vm = this
      vm.turnOut = false
    },
    addItem () {
      // this.$router.push({
      //   name: 'rate-option-editor',
      //   query: {
      //     type: 0 // 新增    0   编辑 1  查看 2
      //   }
      // })
      this.turnOut = true
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.initPage()
  }
}
</script>

<style lang="less">
@import '../../../styles/common.less';
@import '../../../styles/table.less';
.ivu-modal-content .ivu-modal-body{
  padding:26px;
}
</style>
